/**
 * 柱状图数据处理
 *
 * @param {data} 数据
 * @return {options} {返回配置}
 */
import {regFenToYuan} from '../number';

const Icons = {
    First: require('~/css/img/first.png'),
    Second: require('~/css/img/second.png'),
    Three: require('~/css/img/three.png'),
};

export const lineOptions = (data, type) => {
    const option = {
        title: {
            text: `团队${type === 1 ? '完成率' : '金额'}排行${data.length < 10 ? '' : 'top10'}`,
            left: 'center',
            textStyle: {
                fontWeight: 'normal',
                color: '#FFEBAA',
                fontSize: 40
            },
        },
        grid: {
            left: -100,
            right: '3%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            show: false
        },
        yAxis: [
            {
                type: 'category',
                data: [],
                inverse: true,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    formatter(params, index) {
                        if (index < 3) {
                            return [
                                `{a${index + 1}|}  ${params.length <= 8
                                    ? params : `${params.slice(0, 8)}...`}`
                            ].join('\n');
                        }
                        if (index > 8) {
                            return [
                                `{b${index + 1}|${index + 1}}   ${params.length <= 8
                                    ? params : `${params.slice(0, 8)}...`}`
                            ].join('\n');
                        }
                        return [
                            `{b${index + 1}|${index + 1}}    ${params.length <= 8
                                ? params : `${params.slice(0, 8)}...`}`
                        ].join('\n');
                    },
                    rich: {
                        a1: {
                            height: 45,
                            backgroundColor: {
                                image: Icons.First
                            },
                        },
                        a2: {
                            height: 45,
                            backgroundColor: {
                                image: Icons.Second
                            },
                        },
                        a3: {
                            height: 45,
                            backgroundColor: {
                                image: Icons.Three
                            },
                        },
                        b: {
                            color: '#fff',
                        }
                    },
                    fontWeight: 600,
                    fontSize: 24,
                    color: '#FFF',
                    align: 'left',
                    margin: 350
                },
            },
            {
                type: 'category',
                inverse: true,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    inside: false,
                    textStyle: {
                        color: '#FFF',
                        fontSize: '20',
                    },
                    formatter(val) {
                        return `${val}`;
                    }
                },
                splitArea: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                data: []
            },
            {
                type: 'category',
                inverse: true,
                position: 'left',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    inside: false,
                    textStyle: {
                        color: '#FFF',
                        fontSize: '20',
                        fontWeight: 600,
                    },
                    formatter(val) {
                        return `${val}%`;
                    }
                },
                splitArea: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                data: []
            }
        ],
        series: [
            {
                type: 'bar',
                data: [],
                barWidth: 30,
                itemStyle: {
                    emphasis: {
                        barBorderRadius: 10,
                    },
                    normal: {
                        color: '#FFF',
                        barBorderRadius: 20,
                        // label: {
                        //     show: true,
                        //     position: 'left',
                        //     fontSize: 20,
                        //     fontWeight: 600,
                        //     formatter(params) {
                        //         return `${params.data}%  `;
                        //     },
                        // }
                    }
                },
            },
        ]
    };
    data.forEach(ele => {
        option.yAxis[0].data.push(ele.name);
        option.yAxis[1].data.push(regFenToYuan(ele.totalMoney));
        option.yAxis[2].data.push(ele.percent);
        if (type === 1) {
            option.series[0].data.push(ele.percent);
        }
        else {
            option.series[0].data.push(ele.totalMoney);
        }
    });
    return option;
};
